$icons: '../icons/';

.sidebar {
    width: 390px;
    height: 100%;
    background-color: #DDDDDD;
    position: relative;
    z-index: 5;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    .m-tree {
        position: relative;
        padding: 5px;
        height: $sidebarPaneHeight;
        width: 100%;
        overflow-y: auto;
        background-color: rgba(#FFFFFF, 0.5);

        .m-node {
            margin: 1px 0px;
            
            .node {
                display: flex;
                cursor: pointer;
                width: 100%;
                padding: 4px 5px;
                margin: 0px 0px;
                align-items: center;
                
                &.setup {
                    cursor: default;
                    border-top: 2px solid #666666;
                    border-bottom: 2px solid #666666;
                }
            }
            
            .icon {
                margin-right: 8px;
            }
            
            .setup-textbox{
                display: table;
                margin: 0px auto;
            }
            .textbox {
                flex-grow: 1;
            }
        }
        
        .disabled {
            opacity: 0.5;
        }
    }

    .running-node {
        border-color: #333333;
        border-width: 2px;
        border-style: dashed;
    }

    .highlight-button,.icon.preview {
        font-size: 20px;
        margin-right: 5px;
        margin-left: 8px;

        &.inactive {
            opacity: 0.5;
        }
    }
}

.sidebar .sidebar-menu-tabs {
    background-color: #666666;
    border: 2px #333 solid;
    border-right: none;
    border-radius: 0px;
    font-size: 20px;
    height: $sidebarTabBarHeight;

    .rc-menu-item {
        position: relative;
        box-sizing: content-box;
        height: $sidebarTabHeight;
        width: 50%;
        padding: 0px;
        border: 2px solid #AFAFAF;
        border-left: none;
        border-right: none;
        margin: 0px;
        background-color: #333333;
        color: #F8F8F8;
        line-height: $sidebarTabHeight;
        text-align: center;
        text-shadow: -1px -1px 0 #333333, 1px -1px 0 #333333, -1px 1px 0 #333333, 1px 1px 0 #333333;

        &:disabled {
            opacity: 0.5;
        }
    }

    .rc-menu-item-selected {
        background-color: #2BAEE9;
    }

    .rc-menu-item:before {
        display: block;
        content: '.';
        color: transparent;
        font-size: 0;
        position: absolute;
        left: 0;
        right: 0;
        top: -2px;
        bottom: -2px;
    }

    .rc-menu-item.ws:before {
        border-left: 2px solid #AFAFAF;
        border-right: 2px solid #AFAFAF;
    }

    .rc-menu-item.wp:before {
        border-right: 2px solid #AFAFAF;
    }

    .rc-menu-item.tool {
        border-top: none;
    }

    .rc-menu-item.tool:before {
        border-left: 2px solid #AFAFAF;
        border-right: 2px solid #AFAFAF;
    }

    .rc-menu-item.tolerance {
        border-top: none;
    }

    .rc-menu-item.tolerance:before {
        border-right: 2px solid #AFAFAF;
    }
}

.sidebar .properties-pane {
    z-index: 10;
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: -100%;
    background-color: rgba(#F8F8F8, 1);
    border-top: 2px solid #333333;
    -webkit-transition: -webkit-transform ease 250ms;
    -moz-transition: -moz-transform ease 250ms;
    -ms-transition: -ms-transform ease 250ms;
    -o-transition: -o-transform ease 250ms;
    transition: transform ease 250ms;
    
    &.desktop {
        height: calc(100% - #{$headerHeight});
        border-bottom: 2px solid #333333;
    }

    &.mobile {
        height: 100%;
    }
    
    &.visible {
        -webkit-transform: translate3d(100%, 0, 0);
        -moz-transform: translate3d(100%, 0, 0);
        -ms-transform: translate3d(100%, 0, 0);
        -o-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    
    .properties-pane-container {
        z-index: 11;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        background-color: inherit;
        
        .rc-menu {
            border-radius: 0px;
            z-index: inherit;
        }
        
        .preview .container {
            position: absolute;
            padding: 0px;
            width: 100%;
            height: 100%;

            -webkit-transition: -webkit-transform ease 250ms;
            -moz-transition: -moz-transform ease 250ms;
            -ms-transition: -ms-transform ease 250ms;
            -o-transition: -o-transform ease 250ms;
            transition: transform ease 250ms;

            &.desktop {
                z-index: 9;
                border-left: solid 2px #333333;
                border-right: solid 2px #333333;
            }

            &.mobile {
                left: -100%;
                z-index: 13;
            }

            &.visible {
                -webkit-transform: translate3d(100%, 0, 0);
                -moz-transform: translate3d(100%, 0, 0);
                -ms-transform: translate3d(100%, 0, 0);
                -o-transform: translate3d(100%, 0, 0);
                transform: translate3d(100%, 0, 0);
            }

            .preview-exit.icon {
                right: 0;
                margin: 8px;
                position: absolute;
                color: #999999;
            }

            .geometry-container {
                width: 100%;
                height: 100%;

                canvas {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .titlebar {
            z-index: 12;
            width: 100%;
            height: 50px;
            flex-grow: 0;
            flex-shrink: 0;
            cursor: default;
            display: flex;
            align-items: center;
            padding: 5px;
            border-bottom: 2px solid #333333;
            background-color: inherit;

            .title {
                flex-grow: 1;
                font-size: 14px;
                font-weight: bold;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;

                .type {
                    border-bottom: 2px solid #666666;
                }

                .name {
                    position: relative;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;

                    #content {
                        position: relative;
                    }
                }
            }

            .title-back.icon {
                margin-right: 8px;
            }

            .title-icon.icon {
                margin-right: 8px;
            }

            .title-exit.icon {
                margin-left: 8px;
            }
        }

        .properties {
            z-index: 12;
            flex-grow: 1;
            width: 100%;
            padding-top: 5px;
            padding-bottom: 5px;
            overflow: auto;
            background-color: inherit;
            
            .icon {
                margin-left: 3px;
                margin-right: 11px;
                
                &.custom {
                    font-size: 24px;
                }
            }

            .property {
                padding: 5px;
                color: #333333;
                width: 100%;
                white-space: normal;

                &.rc-menu-item-disabled {
                    -webkit-touch-callout: auto;
                    -webkit-user-select: auto;
                    -khtml-user-select: auto;
                    -moz-user-select: auto;
                    -ms-user-select: auto;
                    user-select: auto;
                }

                &.children {
                    cursor: default;
                    
                    .title {
                        border-top: 2px solid #666666;
                        border-bottom: 2px solid #666666;
                        font-size: 18px;
                        text-align: center;
                        cursor: default;
                        margin-bottom: 5px;
                        -webkit-touch-callout: auto;
                        -webkit-user-select: auto;
                        -khtml-user-select: auto;
                        -moz-user-select: auto;
                        -ms-user-select: auto;
                        user-select: auto;
                    }
                    
                    .list {
                        cursor: default;
                        
                        .node {
                            cursor: pointer;
                            width: 100%;
                            display: inline-flex;
                            align-items: center;
                            padding: 4px 0px;
                            margin: 1px 0px;
                            
                            .textbox {
                                flex-grow: 1;
                            }

                            .icon.preview {
                                margin-left: 8px;
                                margin-right: 5px;
                                font-size: 20px;
                                padding: 3px;
                                color: #F8F8F8;
                                background-color: #333333;
                                border-radius: 5px;
                                text-align: center;
                            }

                            &.invalid {
                                cursor: default;
                            }

                            &.is-active {
                                background-color: #0000FF;
                            }

                            &.is-hidden {
                                color: #1B6D85;
                            }

                            &.running-node {
                                background-color: #9BFA9B;
                            }

                            &.disabled {
                                opacity: 0.5;
                            }
                        }
                    }
                }
                
                &:not(.children) {
                    line-height: 30px;
                }
            }
        }
        
        .button-dock {
            z-index: 12;
            background-color: inherit;
            border-top: 2px solid #333333;
        }
        
        .button-dock .rc-menu {
            min-height: 0px;
            height: 46px;
            display: flex;
            align-items: stretch;
            margin: 2px;
            background-color: inherit;
            border: 0px;
            
            .button {
                flex-grow: 1;
                flex-basis: 0;
                height: 44px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #333333;
                border-bottom: 2px solid #333333;
                padding: 0px;
                color: #F8F8F8;
                cursor: pointer;
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                
                .icon {
                    font-size: 20px;
                    margin-left: 5px;
                    vertical-align: middle;
                }

                &.rc-menu-item-disabled {
                    opacity: 0.5;
                }
                
                &:first-child {
                    margin-right: 2px;
                }
            }
        }
    }
}

.sidebar .treebeard {
    height: $sidebarPaneHeight;
    overflow-y: auto;
    background-color: rgba(#FFFFFF, 0.5);
    
    ul {
        padding: 5px;
    }

    .status-red{
        background-color:lightpink;
    }
    .status-yellow{
        background-color:lightyellow;
    }
    .status-green{
        background-color:lightgreen;
    }

    .node {
        display: inline-flex;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        margin: 1px 0px;
        
        &:not(.divider) {
            min-height: 38px;
        }

        &.divider {
            align-items: center;
            border-top: 2px solid #666666;
            border-bottom: 2px solid #666666;
            padding: 4px 5px;
            cursor: default;
            
            .textbox {
                text-align: center;
            }
        }

    }

    &:not(.flat) .node .toggle-hidden {
        width: 15px;
    }

    .node .toggle {
        top: 0;
        width: 15px;
        min-height: inherit;
        cursor: pointer;
        font-size: 10px;
        background-color: transparent;
        position: relative;
        
        &:before {
            position: absolute;
            left: 2.5px;
            top: 14px;
        }
    }
    
    .node .inner {
        display: inline-flex;
        align-items: center;
        width: 100%;
        min-height: inherit;
        
        &:not(.divider) {
            padding: 0px 5px;
        }
    }

    .node .icon {
        margin-right: 8px;
    }

    .node .textbox {
        flex-grow: 1;
    }
    
    .node .running-node .inner {
        background-color: #9BFA9B;
    }

    .node .disabled span {
        opacity: 0.5;
    }
}

.sidebar .tolerance-list-container {
    height: $sidebarPaneHeight;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: inherit;

    .treebeard {
         flex-grow: 1;

        .node .highlight-button {
             flex-grow: 1;
             min-height: inherit;
             text-align: right;
             line-height: inherit;
             vertical-align: middle;
             padding: 8px;
         }
    }

    .button-dock {
        background-color: inherit;
        border-top: 2px solid #333333;

        .buttons {
            min-height: 0px;
            height: 46px;
            display: flex;
            align-items: stretch;
            margin: 2px;
            background-color: inherit;
            border: 0px;

            .button {
                flex-grow: 1;
                flex-basis: 0;
                height: 44px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #333333;
                border-bottom: 2px solid #333333;
                padding: 0px;
                color: #F8F8F8;
                cursor: pointer;
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;

                .icon {
                    font-size: 20px;
                    margin-left: 5px;
                    vertical-align: middle;
                }

                &.rc-menu-item-disabled {
                    opacity: 0.5;
                }

                &:first-child {
                    margin-right: 2px;
                }
            }
        }
    }
}

.tolerance-mode {
    display:flex;
    border-top: 2px solid black;
    border-bottom: 4px solid #666666;
    div {
        flex:2;
        text-align:center;
        padding:2px;
    }
    div:hover{
        background-color: #35B7FD;
    }
    .active{
        background-color: #2AFD8C;
    }
}
.sidebar .icon {
    font-size: 30px;
    
    &.custom {
        padding: 15px;
        vertical-align: middle;
        background-size: cover;
        background-position: center;
        padding: 5px;
        border-radius: 5px;
        display: inline-block;
        text-align: center;
        height: 30px;
        width: 30px;
        
        &.letter {
            width: auto;
            min-width: 30px;
            font-size: 14px;
            line-height: 23px;
            padding:0px;
            background-color: #333333;
            color: #FFFFFF;
        }    
    }
    
    &.preview {
        font-size: 20px;
        padding: 3px;
        color: #F8F8F8;
        background-color: #333333;
        border-radius: 5px;
        vertical-align: middle;
        text-align: center;
    }

    &.workpiece {
        background-image: url($icons + 'workpiece.svg');
    }
    
    &.tool {
        border: 2px solid #333333;
        border-radius: 5px;
        background-image: url($icons + 'tools/tool.svg');
    }

    &.datum {
        -webkit-mask-image: url($icons + 'tolerance/datum.svg');
        -webkit-mask-size: cover;
        mask-image: url($icons + 'tolerance/datum.svg');
        mask-size: cover;
        background-color: #000000;

        &.A {
            background-color: rgb(255,153,0);
        }
        &.B {
            background-color: rgb(0,215,0);
        }
        &.C {
            background-color: rgb(153,0,153);
        }
        &.D {
            background-color: rgb(0,0,255);
        }
        &.E {
            background-color: rgb(255,215,0);
        }
        &.F {
            background-color: rgb(0,215,215);
        }
        &.G {
            background-color: rgb(255, 0, 0);
        }
    }

    &.angularity {
        background-image: url($icons + 'tolerance/angularity.svg');
    }

    &.circular-runout {
        background-image: url($icons + 'tolerance/circular_runout.svg');
    }

    &.circularity {
        background-image: url($icons + 'tolerance/circularity.svg');
    }

    &.concentricity {
        background-image: url($icons + 'tolerance/concentricity.svg');
    }

    &.cylindricity {
        background-image: url($icons + 'tolerance/cylindricity.svg');
    }

    &.flatness {
        background-image: url($icons + 'tolerance/flatness.svg');
    }

    &.parallelism {
        background-image: url($icons + 'tolerance/parallelism.svg');
    }
    
    &.line {
        background-image: url($icons + 'tolerance/profile_line.svg');
    }

    &.surface {
        background-image: url($icons + 'tolerance/profile_surface.svg');
    }

    &.perpendicularity {
        background-image: url($icons + 'tolerance/perpendicularity.svg');
    }

    &.position {
        background-image: url($icons + 'tolerance/position.svg');
    }

    &.straightness {
        background-image: url($icons + 'tolerance/straightness.svg');
    }

    &.symmetry {
        background-image: url($icons + 'tolerance/symmetry.svg');
    }

    &.total-runout {
        background-image: url($icons + 'tolerance/total_runout.svg');
    }

    &.directed {
        background-image: url($icons + 'dimension/linear_distance.svg');
    }

    &.radial {
        background-image: url($icons + 'dimension/radial.svg');
    }

    &.width {
        background-image: url($icons + 'dimension/width.svg');
    }

    &.height {
        background-image: url($icons + 'dimension/height.svg');
    }

    &.diameter {
        background-image: url($icons + 'dimension/diameter.svg');
    }

    &.angle-size {
        background-image: url($icons + 'dimension/angle_size.svg');
    }

    &.datum {
        -webkit-mask-image: url($icons + 'tolerance/datum.svg');
        -webkit-mask-size: cover;
        mask-image: url($icons + 'tolerance/datum.svg');
        mask-size: cover;
        background-color: #000000;

        &.A {
            background-color: rgb(255,153,0);
        }
        &.B {
            background-color: rgb(0,215,0);
        }
        &.C {
            background-color: rgb(153,0,153);
        }
        &.D {
            background-color: rgb(0,0,255);
        }
        &.E {
            background-color: rgb(255,215,0);
        }
        &.F {
            background-color: rgb(0,215,215);
        }
        &.G {
            background-color: rgb(255, 0, 0);
        }
    }

    &.datum-target {
        background-image: url($icons + 'tolerance/datum_target.svg');
    }

    &.texture {
        background-image: url($icons + 'tolerance/texture.svg');
    }  
}

// ALL hover events MUST go here so that they dont improperly activate on mobile
.sidebar.notouch {
    .m-tree .m-node .node:hover:not(.setup) {
        background-color: rgba(#2BAEE9, 0.5);
    }
    
    .highlight-button, .icon.preview {
        &:hover {
            opacity: 0.75;
            color: #333333;
        }
    }
    
    .sidebar-menu-tabs {
        .rc-menu-item:hover {
            cursor: pointer;
            color: #2BAEE9;
            border-bottom-color: #2BAEE9;
        }
        
        .rc-menu-item-selected:hover {
            color: #FFFFFF;
        }
    }
    
    .properties-pane-container {
        .preview-exit.icon:hover {
            cursor: pointer;
            color: #2BAEE9;
        }
        
        .titlebar .icon:hover:not(.title-icon) {
            cursor: pointer;
            color: #2BAEE9;
        }
        
        .properties .property {
            &:hover:not(.rc-menu-item-disabled) {
                cursor: pointer;
                background-color: rgba(#2BAEE9, 0.5);
            }
            
            .children .list .node {
                .icon.preview:hover {
                    color: #2BAEE9;
                }
                
                &:hover:not(.is-active) {
                    background-color: rgba(#2BAEE9, 0.5);
                    opacity: 1;
                }
            }
        }
        
        .button-dock .button:hover:not(.rc-menu-item-disabled) {
            cursor: pointer;
            color: #2BAEE9;
            border-bottom-color: #2BAEE9;
        }
    }   
    
    .treebeard {
        .node .toggle:hover {
            color: #FFFFFF;
            background-color: #2BAEE9;
        }
        
        .node .inner:hover:not(.divider) {
            cursor: pointer;
            background-color: rgba(#2BAEE9, 0.5);
        }
        
        .node .disabled:hover:not(.divider) {
            background-color: rgba(#2BAEE9, 0.25);
        }
    }
    
    .icon.preview:hover {
        color: #2BAEE9;
        opacity: 1 !important; // I know and I'm sorry
    }
}
